
<template>
  <div class="common-layout">
    <el-container>
      <el-header>
        <Header></Header>
      </el-header>
      <el-container>
        <el-aside :width="$store.state.asideWidth">
          <Menu></Menu>
        </el-aside>
        <el-main>
          <ftagList></ftagList>
          <router-view v-slot="{ Component }">
            <Transition name="fade">
              <keep-alive :max="10">
                <component :is="Component"></component>
              </keep-alive>
            </Transition>
          </router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script setup>
import Menu from "./components/Menu.vue"
import Header from "./components/Header.vue"
import ftagList from "./components/TagList.vue"
</script>
<style>
.el-aside {
  transition: all 0.2s;
}
/*进入之前 */
.fade-enter-from{
  
  opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
}
/* 进入之后 */
.fade-enter-to{
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}
/* 离开之前 */
.fade-leave-from{
  opacity: 1;
 
}
/* 离开之后 */
.fade-leave-to {
  opacity: 0;
  -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
}

.fade-enter-active,
.fade-leave-active {
  transition: all 0.5s ;
}
/* 离开动画 */
.fade-enter-active{
  transition-delay: 0.5s;
}
</style>